<template>
    <div class="fnde">
        <div class="reg-number">
            <!--手机号码-->
            <div class="cell">
                <i class="img-box">
                    <img src="../assets/images/login_phone_icon@2x.png" alt=""/>
                </i>
                <input type="text" name="phone_number_reg" v-model="phone_number" placeholder="请输入手机号码"/>
                <button class="get_code" style="margin-right: -2px;" @click="getCode()" :disabled="!show">
                    {{miao}}
                </button>
            </div>
            <!--验证码-->
            <div class="cell borBttom">
                <i class="img-box">
                    <img src="../assets/images/login_captcha_icon@2x.png" alt=""/>
                </i>
                <input type="text" name="password1" v-model="yanzhengmas" placeholder="请输入验证码"/>
            </div>
            <!--密码-->
            <div class="cell borBttom">
                <i class="img-box">
                    <img src="../assets/images/login_setpassword_icon@2x.png" alt=""/>
                </i>
                <input type="password" name="pass_word" v-model="pass_word" placeholder="请输入密码"/>
            </div>
            <div class="cell borBttom">
                <i class="img-box">
                    <img src="../assets/images/login_password_icon@2x.png" alt=""/>
                </i>
                <input type="password" name="pass_word_ss" v-model="pass2_word" placeholder="请再次输入密码"/>
            </div>
        </div>
        <!--<div class="protocol">-->

        <!--<label>-->
        <!--<input id="check" style="display: none" type="checkbox"  checked="checked"/>-->
        <!--<div class="check_box">-->

        <!--</div>-->
        <!--&lt;!&ndash;<input id="check" style="display: none" type="checkbox"  checked="checked"/>&ndash;&gt;-->
        <!--注册即同意-->
        <!--<a href="https://api.mayinvwang.com/webview/deals/">《蚂蚁女王服务》 </a>-->
        <!--</label>-->

        <!--</div>-->
        <!--注册按钮-->
        <div class="btn-find" @click="successClick()" style="margin: 5.3125rem auto 0;">
            <button >
                完成
            </button>
        </div>
        <!--<p class="login-text">-->
        <!--<a id="zhangLogin" href="javjscript:;">账号登录</a>-->
        <!--<i></i>-->
        <!--<a href="javjscript:;" id="tiaozuang" class="fontCd329">快捷登录</a>-->
        <!--</p>-->
        <footer class="login-footer">
            <p>客服电话：<a href="tel:400-8787-923" class="fontCd329">400-8787-923</a></p>
        </footer>
    </div>
</template>

<script>
    export default {
        name: 'register',
        data() {
            return {
                phone_number:"",
                pass_word:"",
                pass2_word:'',
                phone_ok:'',
                password_ok:'',
                //秒数
                miao:'获取验证码',
                show:true,
                yanzhengma:"",
                yanzhengmas:"",
                check:true//阅读并同意蚂蚁女王协议
            }
        },
        methods:{
            phoneYan(){
                let phone=this.phone_number;
                console.log(phone)
                if(phone=='') {
                    this.$layer.msg('手机号不能为空！')
                    return true;
                }else if(!(/^1[3|4|5|8|7|2][0-9]\d{8}$/.test(phone))){
                    this.$layer.msg("手机号码错误");
//          this.phone_number='';
                    return true;
                }else{
                    this.phone_ok=true;
                }
            },
            passYan(){
                let password=this.pass_word;
                if(password==''){
                    this.$layer.msg('密码不能为空！')
                }else if(password.length<6||password.length>16){
                    // alert('手机号不匹配正则');
                    this.$layer.msg('请输入正确的密码');
                }else{
                    this.password_ok=true;
                }

            }
            ,getCode(e){
                let phone=this.phone_number;
                console.log(phone)
                if(phone=='') {
                    this.$layer.msg('手机号不能为空！')
                    return true;
                }else if(!(/^1[3|4|5|8|7|2][0-9]\d{8}$/.test(phone))){
                    this.$layer.msg("手机号码错误");
//          this.phone_number='';
                    return true;
                }else{
                    this.phone_ok=true;
                }

                if(!this.phone_ok)return
                this.show=false;
                var beclick=true;
                if(!beclick) return;
                beclick = false;
                this.$http.post("http://api.mayinvwang.com/index.php/AppjsonPublic/verifyPhone",
                    {phone:this.phone_number}
                ).then(
                    (res)=>{
                        console.log(res.data.verify);
                        console.log(res);
                        if(res.data.status=='0'){
                            beclick = true;
                            this.show=true;
                             return this.$layer.msg("用户已未注册")
                        }
                        this.yanzhengma=res.data.verify;
                        var a=60;
                        var timer1=setInterval(()=>{
                            a--;
                            this.miao=a+"重新获取";
                            if(a < 0){
                                clearInterval(timer1);
                                this.show=true;
                                beclick = true;
                                this.miao="获取验证码";
                            }
                        },1000);
                    },
                    (res)=>{}
                )
            },
            successClick(){
                let beready=true;

                if(!this.check){
                    return  this.$layer.msg('阅读并同意协议')
                }
                if(this.pass2_word!=this.pass_word){
                    return  this.$layer.msg('两次密码不一致')
                }
                this.passYan();
                if(!this.yanzhengmas){
                    this.$layer.msg('验证码不能为空');
                    this.phoneYan();
                    return
                } else if(this.yanzhengmas!=this.yanzhengma){
                    return this.$layer.msg('验证码错误')
                }

                if(!beready)return;
                beready=false;
                console.log(this.phone_ok,this.password_ok)
                if(this.phone_ok&&this.password_ok){
                    this.$http.post('http://api.mayinvwang.com/index.php/AppjsonPublic/findPassword',
                        {phone:this.phone_number,
                            verify:this.yanzhengmas,
                            password:this.pass_word,
                            repassword:this.pass_word}
                    ).then(
                        (res)=>{
                            console.log(res);
                            beready=true;
                            if(res.data.status=='1'){
                                setTimeout(()=>{
                                    this.$layer.msg(res.data.msg);
                                    this.$router.push( {path:'/'})
                                },1000);

                            }else if(res.data.status=='0'){
                                this.$layer.msg(res.data.msg)
                            }
                        },
                        (res)=>{
                            beready=true;
                        }
                    )
                }
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .check_box{
        width:0.9375rem;
        height:0.9375rem;
        vertical-align: middle;
        display: inline-block;
        position: relative;
    }
    .check_box:before{
        width: 0.9375rem;
        display: inline-block;
        height: 0.9375rem;
        content: '';
        background:  url(../assets/images/payment_selected_normal@2x.png) no-repeat;

        background-size: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -0.468rem;
        margin-top: -0.59rem;
        /*transform: translate(-50%, -50%);*/

    }
    #check:checked ~ .check_box:before{
        width: 0.9375rem;
        display: inline-block;
        height: 0.9375rem;
        content: '';
        background:  url(../assets/images/payment_selected_press@2x.png) no-repeat;
        background-size: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -0.468rem;
        margin-top: -0.59rem;
        /*transform: translate(-50%, -50%);*/
    }
    .cell input{
        padding-left: 6px;
    }
</style>
